<template>
  <div class="item-info-wapper">
    <van-nav-bar
      title="物资详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    >
      <van-icon name="arrow-left" slot="left" />
      <!--<van-icon name="search" slot="right"/>-->
    </van-nav-bar>
    <div class="item-info-content">
      <div class="item-panel">
        <div class="item-panel-content">
          <van-panel title="库存项目">
            <div style="padding: 10px 0px">
              <div class="clearfix">
                <span class="user-line-label">物资编码：</span>
                <span class="user-line-input">{{ good.itemid }}</span>
                <!--<span class="user-line-input">物资号</span>-->
              </div>
              <div class="clearfix">
                <span class="user-line-label">专业：</span>
                <span class="user-line-input">{{ goodInfo.codevalue }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">采购方式：</span>
                <span class="user-line-input">{{ goodInfo.refrence }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">物资名称：</span>
                <span class="user-line-input">{{ good.description }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">规格型号：</span>
                <span class="user-line-input">{{ goodInfo.spec }}</span>
              </div>
			  <div class="clearfix">
			    <span class="user-line-label">单位：</span>
			    <span class="user-line-input">{{ goodInfo.unitid }}</span>
			  </div>
			  <div class="clearfix">
			    <span class="user-line-label">库存数量：</span>
			    <span class="user-line-input">{{ goodInfo.qtyOnhand }}</span>
			  </div>
              <div class="clearfix">
                <span class="user-line-label">备注：</span>
                <span class="user-line-input">{{ goodInfo.remark1 }}</span>
              </div>
            </div>
          </van-panel>
        </div>
      </div>

      <div class="item-panel">
        <div class="item-panel-content">
          <van-panel title="事务记录">
            <div style="padding: 10px 0px">
              <div class="clearfix">
                <span class="user-line-label">事务日期：</span>
                <span class="user-line-input">{{ timestampToTime(goodInfo.transdate) }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">事务类型：</span>
                <span class="user-line-input">{{ goodInfo.transid }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">事务原因：</span>
                <span class="user-line-input">{{ goodInfo.transreasonid }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">原因描述：</span>
                <span class="user-line-input">{{ goodInfo.reasondescription }}</span>
              </div>
              <!-- <div class="clearfix">
                <span class="user-line-label">库位：</span>
                <span class="user-line-input">{{ good.locationid }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">序号：</span>
                <span class="user-line-input">{{ good.supplieritemid }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">批号：</span>
                <span class="user-line-input">{{ good.siteid }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">手头数量：</span>
                <span class="user-line-input">{{ good.safeinventry }}</span>
              </div>
              <div class="clearfix">
                <span class="user-line-label">库存状态：</span>
                <span class="user-line-input">{{
                  good.itemweight | filterType
                }}</span>
              </div> -->
            </div>
          </van-panel>
        </div>
      </div>

<!--      <div class="item-panel">-->
<!--        <div class="item-panel-content">-->
<!--          <van-panel title="相关文档">-->
<!--            <div style="padding: 10px 0px">-->
<!--              <div class="clearfix">-->
<!--                <span class="user-line-label">文档号：</span>-->
<!--                <span class="user-line-input"></span>-->
<!--              </div>-->
<!--              <div class="clearfix">-->
<!--                <span class="user-line-label">作者：</span>-->
<!--                <span class="user-line-input"></span>-->
<!--              </div>-->
<!--              <div class="clearfix">-->
<!--                <span class="user-line-label">关联文档：</span>-->
<!--                <span class="user-line-input"></span>-->
<!--              </div>-->
<!--              <div class="clearfix">-->
<!--                <span class="user-line-label">备注：</span>-->
<!--                <span class="user-line-input"></span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </van-panel>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="item-panel">-->
<!--        <div class="item-panel-content">-->
<!--          <van-panel title="图片">-->
<!--            <van-image-->
<!--              width="100"-->
<!--              height="100"-->
<!--              fit="scale-down"-->
<!--              src="goodInfo.urls"-->
<!--            />-->
<!--          </van-panel>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import { getAll, findByItemid } from "@/api/goods.js";
export default {
  name: "ItemInfo",
  data() {
    return {
      activeNames: ["1", "2", "3"],
      good: {},
      goodInfo: {},
      pageInfo: {
        itemid: "",
        page: 1,
        pageSize: 20
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/home"
      });
        // this.$router.back(-1)
    },
    getGoodsInfo() {
      getAll(this.pageInfo).then(res => {
        console.info("物资详情");
        if (res.data.length) {
          console.dir(res.data[0]);
          this.good = res.data[0];
        }
      });
    },
    findByItemid() {
      findByItemid(this.pageInfo.itemid).then(res => {
        if (res.data) {
          this.goodInfo = res.data;
        }
      });
    },
	timestampToTime(timestamp) {
          if(timestamp==null||timestamp==''){
            return '';
          }
	        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
	        // let Y = date.getFullYear() + '-';
	        // let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
	        // let D = date.getDate() + ' ';
	        // let h = date.getHours() + ':';
	        // let m = date.getMinutes() + ':';
	        // let s = date.getSeconds();
	        // return Y+this.padLeftZero(M)+this.padLeftZero(D)+this.padLeftZero(h)+this.padLeftZero(m)+this.padLeftZero(s);
	        let y = date.getFullYear();
	        let MM = date.getMonth() + 1;
	        MM = MM < 10 ? ('0' + MM) : MM;
	        let d = date.getDate();
	        d = d < 10 ? ('0' + d) : d;
	        let h = date.getHours();
	        h = h < 10 ? ('0' + h) : h;
	        let m = date.getMinutes();
	        m = m < 10 ? ('0' + m) : m;
	        let s = date.getSeconds();
	        s = s < 10 ? ('0' + s) : s;
	        return y + '-' + MM + '-' + d ;
	    }
  },
  filters: {
    filterType: function(val) {
      switch (val) {
        case "STK":
          return "常备库存项目";
          break;
        case "NS":
          return "非常备库存项目";
          break;
        case "SP":
          return "特别订购项目";
          break;
        default:
          return "未知类型";
      }
    }
  },
  created() {
    console.log(this.$route.query.id);
    this.pageInfo.itemid = this.$route.query.id;
    this.getGoodsInfo();
	this.findByItemid();
  }
};
</script>

<style scoped lang="scss">
.item-info-wapper {
  position: relative;

  .item-info-content {
    position: relative;
    top: 46px;

    .user-line-label {
      width: 85px;
      text-align: right;
      font-size: 14px;
      color: #606266;
      line-height: 1;
      /*padding: 0px 12px 10px 0;*/
      box-sizing: border-box;
      display: inline-block;
    }

    .user-line-input {
      position: relative;
      display: inline-block;
      font-size: 14px;
      vertical-align: top;
      width: calc(100% - 85px);
    }
    .item-panel {
      padding: 20px 20px 0px 20px;
      .item-panel-content {
        padding: 5px;
        display: block;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        border-color: #eee;
      }
    }
  }
}
</style>
